<template>
  <div class="search">
    <!-- 顶部搜索框 -->
    <SearchNarBar
      :startDate="startDate"
      :endDate="endDate"
      :currentCity="currentCity"
    />
    <!-- 下拉菜单 -->
    <DropdownSelect
      :items-data="searchConditions.data.allConditions"
      v-if="searchConditions.data"
    />
    <!-- 快速tag选择 -->
    <TagSelect :item-data="searchHouse.data.hotFilters" />
    <!-- 搜索推荐列表 -->
    <HouseList v-if="searchHouse.data" :list-data="searchHouse.data.items" />
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import useSearchStore from "../../stores/modules/searchStore";

import SearchNarBar from "./cpns/search-narBar.vue";
import DropdownSelect from "./cpns/dropdown-select.vue";
import TagSelect from "../../components/tag-select/tag-select.vue";
import HouseList from "../../components/house-list/house-list.vue";

// 加载初始数据
const searchStore = useSearchStore();
searchStore.fetchSearchConditions();
searchStore.fetchSearchHouse();
const { searchConditions, searchHouse } = storeToRefs(searchStore);
// 搜索框参数
const route = useRoute();
const { startDate, endDate, currentCity } = route.query;

// 下拉菜单数据
</script>
<style lang="less" scoped>
.search {
  width: 100%;
  overflow: hidden;
  background-color: #f7f8fb;
}
</style>
